<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	
	  <div class="goodsCon-page" v-if="!spinShow">
	  		<div class="goods-img" style="height:100vw">
				<u-swiper
					radius='0'
					keyName="adImage"
					:list="info.goodsAlbum"
					height="100vw"
					indicator
					indicatorMode="line"
				></u-swiper>
	  		</div>
	  
	  		<div class="price-block">
	  			<div class="now-price">{{info.goodsPrice}}<span class="span"> 积分</span></div>
	  			<div class="time">库存数量：{{info.goodsStock}}件</div>
	  		</div>
	  
	  		<div class="goods-name">
	  			<div class="title">{{info.goodsName}}</div>
	  		</div>
	  
	  		<div class="goods-info-block" style="padding: 10px 16px;font-size: 14px;color: #313131;">
	  			产品详情
	  		</div>
	  		<div class="goods-info-block goods-goodsDesc" style="padding: 10px 16px;">
				<u-parse :content="info.goodsDesc"></u-parse>
			</div>
	  
	  		<!--页面底部-->
			<div class="goodsInfo-bottom">
				<div class="goodsInfo-bottom-item" @click="callPhone">
					<u-icon name="chat" label="客服" labelPos="bottom" labelSize="10px" size="22px"></u-icon>
				</div>
				<div class="goodsInfo-bottom-item" @click="toCar" style="position: relative;">
					<u-icon name="shopping-cart" label="购物车" labelPos="bottom" labelSize="10px" size="24px"></u-icon>
					<u-badge max="99" :value="carInfo" numberType="overflow" :absolute="true" :offset="[0,0]"></u-badge>
				</div>
				<div class="goodsInfo-bottom-btn">
					<div class="btn-cart btn-div" @click="showSku('car')">加入购物车</div>
					<div class="btn-buy btn-div" @click="showSku('buy')">立即兑换</div>
				</div>
			</div>
	
	  		<!--规格选项-->
			<u-popup :show="show" mode="bottom" :round="10" @close="closedSku" >
				<div class="goods-sku-div">
					<div class="goods-top">
						<div class="goods-img">
							<img :src="info['goodsImage']" mode="aspectFit" class="img"/>
						</div>
						<div class="goods-right">
							<div class="goods-price">{{info.goodsPrice}}<span class="span"> 积分</span></div>
							<div class="goods-stock">库存：{{info.goodsStock}}</div>
							<div class="closed-btn" @click="closedSku">
								<u-icon name="close-circle-fill" :size="24"></u-icon>
							</div>
						</div>
					</div>
					<div class="goods-middle">
						<div class="goods-middle-cell">
							<div style="width:80px">
								<span class="goods-info-title">购买数量</span>
							</div>
							<div>
								<u-number-box v-model="goodsNum"  :max="info.goodsStock"></u-number-box>	
							</div>
						</div>
	
					</div>
					<div class="goods-sku-btn">
						<!--购买数量大于积分余额-->
						<u-button color="linear-gradient(to right, #ff4600, #fd7505)" disabled  style="width:100%;border-radius:20px" v-if="goodsNum*info['goodsPrice'] > count">余额不足</u-button>
						<!--可以购买-->
						<u-button color="linear-gradient(to right, #ff4600, #fd7505)" @click="submitData"  style="width:100%;border-radius:20px" v-else :loading="btnLoading">{{popType == 'car' ? '加入购物车' : '立即兑换'}}</u-button>
					</div>
				</div>
			</u-popup>
	  	</div>

  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import{integralUserInfo,addCartGoods,integralOrderConfirm,integralGoodsDetail,inquiryCartInfo} from '@/config/points.js'
  import {commonData,pageSeo} from '@/config/api.js'
  import store from '@/store';
  export default {
    components: {
       

    },
    data() {
      return {
	    
			showRight: false,
			goodsId:'',
			spinShow:false,
			info:{},
			isLogin:false,
			show:false,
			goodsNum:1,
			count:0,
			popType:'',
			btnLoading:false,
			storeUserInfo:{},
			contactMobile:''
      }
    },
    filters:{
		fifshippingTypes(val){
			if(val == 'buyer_shipping'){
				return '自提，买家承担运费'
			}else if(val == 'logistics_shipping'){
				return '卖家提供运输，买家承担运费'
			}else if(val == 'free_shipping'){
				return '卖家提供运输，卖家承担运费'
			}
		},
		fifTime(dateString){

		},
		fifNum(val){
			if(val){
				return parseFloat(val)*1
			}else{
				return ''
			}
		},
	},
	async onLoad(options) {
    	await this.$onLaunched;	
       this.options = options;
	   this.goodsId = this.options.goodsId ? this.options.goodsId : '';
	   store.dispatch('userInfo').then(()=>{
			this.storeUserInfo = store.state.userInfo;
			if(this.storeUserInfo.userId){
				this.getCount();
			}
	   })
		this.getPageInfo();
		store.dispatch('getInquiryCartInfo')
		commonData().then((res)=>{
			this.contactMobile = res.contactMobile
		})
    },
	async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif	
	},
    computed: {
		...mapState(['carInfo']),
		},
	
    methods: {
		callPhone(){
			uni.makePhoneCall({
				phoneNumber:  this.contactMobile
			});
		},
		
		//积分余额
		getCount(){
		  integralUserInfo().then((res)=>{
				this.count = res.userInfo.balance*1;
			})
		},
		//关闭规格弹窗
		closedSku(){
			this.show = false;
			this.goodsNum = 1;
		},
		//显示规格弹窗
		showSku(type){
			this.judgeLogin(() => {
				this.show = true;
				this.popType = type
			})
		},

		toCar(){
			uni.navigateTo({
				url: "/pagesIntegral/integralCar"
			})
		},
		//提交
		submitData(){
			this.judgeLogin(() => {
				this.btnLoading = true;
				if(this.popType == 'car'){
					addCartGoods({goodsId:this.goodsId,goodsNum:this.goodsNum}).then((res)=>{
						uni.$u.toast("添加成功");
						this.btnLoading = false;
						store.dispatch('getInquiryCartInfo')
						this.closedSku();
					}).catch(()=>{
						this.btnLoading = false;
					})
				}else{
					let data = {};
					data.goodsList = [{goodsId:this.goodsId,goodsNum:this.goodsNum}];
					integralOrderConfirm(data).then(()=>{
						this.btnLoading = false;
						this.closedSku();
						uni.navigateTo({
							url: '/pagesIntegral/intergralOrderSettlement?goodsId='+ this.goodsId +'&goodsNum='+ this.goodsNum+'&buyType=2'
						})
					}).catch(()=>{
						this.btnLoading = false;
					})
				}
			})	
		},
		
		getPageInfo(){
		  this.spinShow = true;
		  integralGoodsDetail({goodsId:this.goodsId}).then((res)=>{
				this.info = res;
				console.log("res",res)
				this.spinShow = false;
			})
		},

		toExchange(){
			this.judgeLogin(() => {
				uni.navigateTo({
					url: "/pagesIntegral/integralExchange?goodsId="+ this.goodsId
				})
			})
		}
		
	},
	

  }
</script>


<style>
	
</style>

<style lang="scss">
@import '@/style/common.scss';
 //商品规格弹窗
  .goods-sku-div{
	  .goods-middle-cell{
		  @include flexbox(space-between,center);
		  padding:10px 12px;
		  border-bottom:1px solid #eee;
		  border-top:1px solid #eee;
		  .goods-info-title{
			  font-size: 14px;
			  color: #808080;
		  }
		  
	  }
    .goods-top{
	  @include flexbox(flex-start,flex-start);
      padding:12px 16px;
      position: relative;
      .goods-img{
        width:96px;
        height:96px;
        background: $background-color;
        .img{
          width:100%;
          height:100%;
          object-fit: contain;
        }
      }
      .goods-right{
        width:calc(100% - 96px);
        padding-left:16px;
        padding-top:16px;
        .goods-price{
          color:$theme-color;
          font-size:24px;
          .span{
            font-size:$s-font
          }
        }
        .goods-stock{
            font-size:$m-font;
            color:$g-font-color;
            margin-top:10px;
        }
        .closed-btn{
          width:30px;
          height:50px;
          position: absolute;
          right:0;
          top:10px;
          line-height: 50px;
          text-align: center;
        }
      }
    }
    .goods-middle{
      max-height:300px;
      overflow: auto;
    }
    .sku-list{
      padding-top:12px;
      .sku-item{
        background: #f7f8fa;
        padding:8px;
        font-size:$m-font;
        display: inline-block;
        margin: 0 12px 12px 0;
      }
      .sku-item.active{
        background: $theme-color;
        color:#fff;
      }
    }
    .goods-sku-btn{
      padding:12px 16px;

    }
    .van-stepper__input{
      width:60px
    }
  }

.goodsCon-page{
			background: #F8F8F8;
			min-height:100%;
			padding-bottom:80px;
			.goodsInfo-bottom{
				 @include flexbox(space-between,center);
				 height:50px;
				 position: fixed;
				 bottom: 0;
				 width:100%;
				 z-index: 3;
				 background: #fff;
				 padding-right:8px;
				 .goodsInfo-bottom-item{
					 width:40px;
					 font-size: 18px;
					 color:#323233;
					 text-align: center;
				 }
			    .goodsInfo-bottom-btn{
					flex:1;
				    @include flexbox(space-between,center);
					padding-left:5px;
					.btn-div{
						width:50%;
						color:#fff;
						font-size: 14px;
						text-align: center;
						height:40px;
						line-height: 40px;
					}
					.btn-cart{
						background: linear-gradient(to right, #ffd01e, #ff8917);
						border-top-left-radius: 20px;
						border-bottom-left-radius: 20px;
					}
					.btn-buy{
						background: linear-gradient(to right, #ff6034, #ee0a24);
						border-top-right-radius: 20px;
						border-bottom-right-radius:20px;
					}
					
				}
			}
		}
		.goodsCon-page .goods-img{
		}
		.goodsCon-page .goods-info-block {
		    background: #fff;
		    margin-top: 8px;
		}
		.goodsCon-page .goods-img .img{
			display: block;
		}
		.goodsCon-page .price-block{
			background: url("https://pic.moresu.com/FoEuuoe1itBzZSAq9H-RPMAeIbCu") no-repeat;
			background-size: cover;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			height:54px;
			margin-top: -20px;
			z-index: 1;
			position: relative;
			color:#fff;
			padding:0 16px;
			display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox; /* TWEENER - IE 10 */
			display: -webkit-flex; /* NEW - Chrome */
			display: flex;
			/* 09版 */
			-webkit-box-align: center;
			/* 12版 */
			-webkit-align-items: center;
			-moz-align-items: center;
			-ms-flex-align: center;
			-o-align-items: center;
			align-items: center;
			-webkit-box-pack: space-between;
			-ms-flex-pack: space-between;
			justify-content: space-between
		}
		.goodsCon-page .price-block.not-started{
			background: url("https://pic.moresu.com/Fk0tMLpPYzjhNI4Za0DR5qc8P8cA");
		}
		.goodsCon-page .price-block.over{
			background: #9C9C9C;
		}
		.goodsCon-page .price-block .now-price{
			font-size:20px;
			font-weight: bold;
			line-height: 54px;
			height:54px;
		}
		.goodsCon-page .price-block .now-price .span{
			font-size:12px;
			font-weight: 400;
			padding-left:5px
		}
		.goodsCon-page .price-block .time{
			font-size:12px;
			line-height: 20px;
		}
		.goodsCon-page .goods-name{
			font-size: 18px;
			font-weight: bold;
			line-height: 30px;
			background: #fff;
			padding:10px 16px;
			word-break:break-all;
		}
		.goodsCon-page .goods-name .sub-title{
			font-size: 12px;
			font-weight: 400;
			line-height: 16px;
			padding-top:5px;
		}
		.goodsCon-page .paiMai-block{
			margin-top:8px
		}
		.goodsCon-page .goods-goodsDesc img{
			max-width:100%;
		}
		.goodsCon-page .paiMai-row{
			background: #fff;
			padding:10px 16px;
			font-size:12px;
			margin-top:8px
		}
		.goodsCon-page .paiMai-row .label{
			color:#9C9C9C
		}
		.goodsCon-page .zhongbiao{
			height: 48px;
			padding:0 16px;
			background: #FFEF94;
			border-radius: 6px;
			display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox; /* TWEENER - IE 10 */
			display: -webkit-flex; /* NEW - Chrome */
			display: flex;
			/* 09版 */
			-webkit-box-align: center;
			/* 12版 */
			-webkit-align-items: center;
			-moz-align-items: center;
			-ms-flex-align: center;
			-o-align-items: center;
			align-items: center;
			-webkit-box-pack: space-between;
			-ms-flex-pack: space-between;
			justify-content: space-between
		}
		.goodsCon-page .zhongbiao .user-block{
			display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox; /* TWEENER - IE 10 */
			display: -webkit-flex; /* NEW - Chrome */
			display: flex;
			/* 09版 */
			-webkit-box-align: center;
			/* 12版 */
			-webkit-align-items: center;
			-moz-align-items: center;
			-ms-flex-align: center;
			-o-align-items: center;
			align-items: center;
			-webkit-box-pack: flex-start;
			-ms-flex-pack: flex-start;
			justify-content: flex-start
		}
		.goodsCon-page .zhongbiao .user-block .user-info{
			margin-left:10px;
		}
		.goodsCon-page .zhongbiao .user-block .user-info .name{
			font-size:12px;
			color:#000;
		}

		.goodsCon-page .zhongbiao .user-block .user-info .sub-title{
			font-size:12px;
			color:#BF9F70;
			margin-top:2px;
		}
		.goodsCon-page .zhongbiao .price{
			font-size: 14px;
			font-weight: bold;
			line-height: 24px;
			color: #000000;
		}

		.goodsCon-page .pop-con-offerList{
			max-height:400px;
			overflow-y: auto;
			padding:10px 8px;
		}

		.goodsCon-page .pop-con-price .pop-con-text{
			font-size: 14px;
			font-weight: 400;
			line-height: 32px;
			color: #000000;
			padding:0 24px;
		}
		.goodsCon-page .pop-con-price .pop-choose-div{
			background: rgba(255, 70, 0, 0.07);
			border-radius:8px;
			padding:10px;
			color:#000;
			width:calc(100% - 48px);
			margin:20px auto 20px auto;
			display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox; /* TWEENER - IE 10 */
			display: -webkit-flex; /* NEW - Chrome */
			display: flex;
			/* 09版 */
			-webkit-box-align: center;
			/* 12版 */
			-webkit-align-items: center;
			-moz-align-items: center;
			-ms-flex-align: center;
			-o-align-items: center;
			align-items: center;
			-webkit-box-pack: space-between;
			-ms-flex-pack: space-between;
			justify-content: space-between
		}
		.goodsCon-page .pop-con-price .pop-choose-div .choose-text{
			width:calc(100% - 60px);
			font-size:12px;
			line-height: 20px;
		}
		.goodsCon-page .pop-con-price .pop-choose-agree{
			padding:0 24px;
			font-size:14px;
		}
		.goodsCon-page .goods-page-bottom{
			position: fixed;
			bottom:0;
			width:100%;
			background: #fff;
			padding:10px;
	}
</style>


    
    
